<template>
  <div>
    <canvas></canvas>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import {
  Engine,
  Scene,
  ArcRotateCamera,
  Vector3,
  MeshBuilder,
  HemisphericLight
} from '@babylonjs/core'

onMounted(() => {
  const canvas = document.querySelector('canvas')! as HTMLCanvasElement
  // 创建引擎
  const engine = new Engine(canvas, true)
  // 创建场景
  const scene = new Scene(engine)
  // 创建相机
  const camera = new ArcRotateCamera(
    'camera',
    -Math.PI / 2,
    Math.PI / 2.5,
    200,
    new Vector3(0, 0, 0)
  )
  // 运用相机和画布关联起来
  // 添加灯光到场景中(环境灯)
  // 创建球体
  camera.attachControl(canvas, true)
  const light = new HemisphericLight('light', new Vector3(4, 1, 0))

  const largeGround = MeshBuilder.CreateGroundFromHeightMap(
    'largeGround',
    'https://assets.babylonjs.com/environments/villageheightmap.png',
    { width: 150, height: 150, subdivisions: 20, minHeight: 0, maxHeight: 10 }
  )
  // 渲染处理
  engine.runRenderLoop(() => {
    scene.render()
  })
  window.addEventListener('resize', function () {
    engine.resize()
  })
})
</script>

<style></style>
